<template>
  <div>
    <!--路由匹配组件-->
    <div class="el-container">
        <div class="el-header slide-down">
          <div class="container clearfix">
             <h1>
                         <span class="nav-logo">
                         <img src="/static/image/zt.png" alt="zt-logo">
                         </span>
                       </h1>
            <ul class="nav clearfix">
                <li class="nav-item"><router-link to="/"  @click.native="changeCheck($event)">首页</router-link></li>
                <li class="nav-item"><router-link to="/speak.html" @click.native="changeCheck($event)">分享</router-link></li>
                <li class="nav-item"><router-link to="/personal.html" @click.native="changeCheck($event)">专栏</router-link></li>
                <li class="nav-item"><router-link to="/photo.html" @click.native="changeCheck($event)">摄影</router-link></li>
                <li class="nav-item"><router-link to="/message.html" @click.native="changeCheck($event)">留言</router-link></li>
            </ul>
          </div>
        </div>
    </div>
      <el-row style="margin: 40px 0px 60px 0px;">
        <el-col :span="8" :offset="8"><div class="grid-content bg-purple-dark">
          <el-input placeholder="请输入内容" v-model="input4">
            <template slot="append"><i class="ivu-icon ivu-icon-search"></i></template>
          </el-input>
        </div></el-col>
      </el-row>
    <router-view/>
     <a href="javascript:void(0)" @click="comeToback">后台管理</a>
  </div>
</template>

<script>
export default {
  name: 'App',
    data(){
       return {
           input4:'',
       }
    },
    mounted(){

    },
    methods: {
        comeToback(){
            window.location.href='/backend.html'
        },
        changeCheck(event){
           let tar = event.currentTarget;
           let siblings = $(tar).parent('.nav-item').siblings();
         for(let i=0;i<siblings.length;i++){
             $(siblings[i]).removeClass('checked');
         }
         $(tar).addClass('checked');
        }
    }
}
</script>

<style>
.ivu-icon-search{
  font-size: 18px;
}
  .el-input-group__append{
    background-color: #292828;
  }
</style>
